<template>
    <!-- 公告管理页面 -->
    <div style="margin-top: 60px; margin-left: 80px">
        <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item label="关键字：" prop="keyWord">
                <el-input v-model="keyWord" placeholder="请输入关键字" style="width: 230px; float: left" />
                <span style="margin-left:30px;">条件查询：</span>
                <el-select v-model="type" style="margin-left:30px; width: 230px;">
                    <el-option label="标题" value="title" />
                    <el-option label="内容" value="content" />
                </el-select>
                <el-button type="primary" style="margin-left: 30px" @click="search">搜索</el-button>
                <el-button type="success" style="margin-left: 20px" @click="add">添加公告</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column property="id" label="编号" width="125" />
            <el-table-column property="date" label="日期" width="300" />
            <el-table-column property="title" label="标题" width="300" />
            <el-table-column property="content" label="内容" width="300" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button size="mini" @click="edit(row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="margin-top: 20px; float: right" background layout="prev, pager, next"
            :page-size="pageSize" :total="total" :current-page="currentPage" @current-change="page" />

        <!-- 添加公告弹窗 -->
        <el-dialog title="添加公告" v-model="dialogTableVisible" width="30%">
            <el-form :model="addNotice" label-width="auto" style="max-width: 600px">
                <el-form-item label="标题">
                    <el-input v-model="addNotice.title" />
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="addNotice.content" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addClick">添加</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改公告弹窗 -->
        <el-dialog title="修改公告" v-model="dialogTableVisible2" width="30%">
            <el-form :model="updateNotice" label-width="auto" style="max-width: 600px">
                <el-form-item label="ID">
                    <el-input v-model="updateNotice.id" readonly />
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="updateNotice.title" />
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="updateNotice.content" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateClick">修改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'

const keyWord = ref('')
const type = ref('title')
const pageSize = ref(5)
const total = ref(0)
const currentPage = ref(1)
const dialogTableVisible = ref(false)
const dialogTableVisible2 = ref(false)
const tableData = ref([])

const addNotice = ref({ title: '', content: '' })
const updateNotice = ref({ id: '', title: '', content: '' })

const add = () => {
    dialogTableVisible.value = true
}

const edit = (row) => {
    dialogTableVisible2.value = true
    Object.assign(updateNotice.value, row)
}

const page = (pageNum) => {
    axios.get(`http://localhost:8181/notice/load?page=${pageNum}&size=${pageSize.value}`).then((res) => {
        tableData.value = res.data.data
        total.value = res.data.total
        currentPage.value = pageNum
    })
}

const search = () => {
    currentPage.value = 1
    axios.get(`http://localhost:8181/notice/load?page=1&size=${pageSize.value}&keyWord=${keyWord.value}&type=${type.value}`)
        .then((res) => {
            tableData.value = res.data.data
            total.value = res.data.total
        })
}

const addClick = () => {
    axios.post('http://localhost:8181/notice/add', addNotice.value).then((res) => {
        if (res.data === true) {
            ElMessageBox.alert(`公告【${addNotice.value.title}】添加成功`, '', {
                confirmButtonText: '确定',
                callback: () => location.reload()
            })
        }
    })
}

const updateClick = () => {
    axios.put('http://localhost:8181/notice/update', updateNotice.value).then((res) => {
        if (res.data === true) {
            ElMessageBox.alert(`公告【${updateNotice.value.title}】修改成功`, '', {
                confirmButtonText: '确定',
                callback: () => location.reload()
            })
        }
    })
}

const del = (row) => {
    ElMessageBox.confirm(`确认删除公告【${row.title}】吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        axios.delete(`http://localhost:8181/notice/delete/${row.id}`).then((res) => {
            if (res.data === true) {
                ElMessageBox.alert(`公告【${row.title}】已删除`, '', {
                    confirmButtonText: '确定',
                    callback: () => location.reload()
                })
            }
        })
    })
}

onMounted(() => {
    page(1)
})
</script>

<style scoped>
.demo-ruleForm {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.el-table {
    margin-top: 20px;
}
</style>
